<template>
  <div class="book-center">
    <h4>蜜读小课 <span @click="moer()">查看更多</span></h4>
    <div class="book-cernte-content" v-for="i in bookLists" @click="particulars(i.bookid)">
      <img :src="URL + i.bookimg " alt="">
      <div>
        <h6>{{i.bookname}}</h6>
        <p>{{i.bookrecommend}}</p>
        <span>{{i.bookprice}} / {{i.contentsummary}}</span>
      </div>
    </div>
  </div>
</template>

<script>
   // import categoryList from '@/components/categoryList'

  export default {
    name: "bookList",
    props:['bookLists'],
    conponents:{
      // categoryList
    },
      data(){
        return{

        }
      },
    mounted(){
      setTimeout(()=>{
        console.log(this.bookLists)
      },3000)

    },
      methods:{
          moer(){
              this.$router.push({name:'xiaokebook'})
          },
          particulars(id){
            this.$router.push({name:'soursedetails',params:{'id':id}})
        },
      }
    }
</script>

<style scoped>
  .book-center{
      /*height:1.5rem;*/
    overflow: hidden;
  }
  .book-center h4{
    line-height: .34rem;
    font-weight: bold;
    margin-top: .05rem;
    text-align: center;
  }
  .book-center >p{
    text-align: left;
    line-height: .34rem;
  }
  .book-center >h4 span{
    float: right;
    margin-right: .15rem;
    font-size: .12rem;
    color: #999;
  }
  .book-cernte-content {
    height: .9rem;
    padding: 0 0.08rem;
  }
  .book-cernte-content img{
    float: left;
    height: 75px;
    width: 75px;
    margin-right: 10px;
  }
  .book-cernte-content div{
    float: left;
    text-align: left;
    width: calc(100% - 95px);
  }
  .book-cernte-content div h6{
    font-size: .14rem;
    height: .22rem;
    font-weight: bold;
  }
  .book-cernte-content div p{
    height: .34rem;
    font-size: .12rem;
    width: 100%;
  }
  .book-cernte-content div span{
    height: .15rem;
    line-height: .12rem;
    font-size: .12rem;
  }
</style>
